<template>
  <div class="cart-main-container">
    <div class="cart-main-box">
      <div class="address" style="display:flex">
        <p>地址:</p>
        <p style="color:orange">{{address}}</p>
      </div>
      <div class="img-div">
        <img src="./../../images/bg_cart_line.png" alt="">
      </div>
      <div class="input-div">
        <p>姓名:</p>
        <input v-model="name" placeholder="请输入姓名" type="text">
      </div>
      <div class="input-div">
        <p>电话:</p>
        <input v-model="phone" placeholder="请输入电话" type="tel">
      </div>
      <div class="input-div">
        <p>房间号:</p>
        <input v-model="roomNo" placeholder="请输入房间号">
      </div>
      <!--<group gutter="0rem" label-margin-right="0">
        <popup-picker title="送达时间" :data="list" v-model="value5" value-text-align="right"></popup-picker>
      </group>-->
      <div class="input-div">
        <p>订单将会在8点前送达哦!</p>
      </div>
      <div class="input-div">
        <p>订单备注:</p>
        <input placeholder="订单备注(选填)" type="tel">
      </div>
      <div style="width: 100%;height: 0.5rem;background: #F8F8F8"></div>
      <div class="product-box">
        <product-item @refresh="init" :active="activeDay" :product="item"
                      v-for="(item,index) in products" :key="'product'+index"></product-item>
      </div>
    </div>
    <div class="cart-main-bottom">
      <div class="cart-total-box">
        <div class="cart-num-container">
          <img src="http://static.52letsgo.cn/zz/wechatimg/ic_user_cart.png" alt="">
          <div class="product-num"><p>{{cartInfo.num}}</p></div>
        </div>
        <!--<div class="line"></div>-->
        <div class="total-price">合计:<span>{{cartInfo.price | currency}}</span></div>
        <div @click="toPay" class="pay-btn">结算</div>
        <!--<p>￥</p>
        <p>{{cartInfo.price}}</p>
        <p @click="toPay" class="cart-settlement">结算</p>-->
      </div>
    </div>
    <confirm-pay :show="showConfirm" @on-cancel="onCancel" @on-confirm="onConfirm">
    </confirm-pay>
  </div>
</template>
<script>
  import {MyGetWithToast, MyGet,MyPostWithToast} from './../../commons/js/MyRequest'
  import {setItem} from './../../commons/js/LocalStorageUtil'
  import {solveDate, fmoney} from './../../commons/js/utils'
  import {getCartStorage, addCartStorage, countCartNum, getTotalPrice, delCart,addCart,getOrderList,clearCartStorage} from './../../commons/js/Cart'
  import { mapState, mapGetters, mapActions } from 'vuex'
  import Group from './../../components/group/index.vue'
  import XInput from './../../components/x-input/index.vue'
  import PopupPicker from './../../components/popup-picker/index.vue'
  import cell from './../../components/cell/index.vue'
  import ProductItem from './cartItem.vue'
  import confirmPay from './confirmPay.vue'
  export default{
    components: {
      Group,
      XInput,
      cell,
      PopupPicker,
      ProductItem,
      confirmPay
    },
    data(){
      return {
        name: "",
        list: [['08:00～08:15', '08:15～08:30','08:30～08:45','08:45～09:00','09:00～09:15','09:15～09:30']],
        value5: ['08:00～08:15'],
        mark: "",
        products: "",
        cartInfo: "",
        activeDay: [],
        showConfirm:false,
        phone:'',
        address:'',
        addressId:'',
        areaId:'',
        cityId:'',
        roomNo:''
      }
    },
    computed:{
      ...mapGetters({  
          hotel: 'getHotel',
          userId:'getUserId'  
      }),  
    },
    methods: {
       ...mapActions({  
          }),  
      init(){
        var carts = getCartStorage();

        this.products = carts;
        this.cartInfo = {
          num: countCartNum(),
          price: getTotalPrice()
        }
      },
      getActiveDay(){
        var data = {
          action: "hotelWeekday"
        };
        MyGetWithToast("ActiveDay", this, function (result, that) {
          console.log(result);
          var data = result.data;
          var dateList = new Array();
          for (var i = 0; i < data.length; i++) {
            if (data[i].state != 1) {
              var weekday = solveDate(data[i].wday);
              dateList.push(data[i].wdate + "-" + weekday);
            }
          }
          var d = new Array();
          d.push(dateList);
          that.activeDay = d;
        }, data);
      },
      toPay(){
         var myreg = /^1\d{10}$/; 
        if(!myreg.test(this.phone)) 
        { 
            this.$vux.toast.show({
              text: "请检查手机号码格式",
              type: 'text',
              //width: '11em',
              time: '1000',
              onShow () {},
              onHide () {}
            }); 
            return; 
        } 
        if(!this.name){
          this.$vux.toast.show({
              text: "请检查姓名",
              type: 'text',
              //width: '11em',
              time: '1000',
              onShow () {},
              onHide () {}
            }); 
            return; 
        }
        if(!this.roomNo){
          this.$vux.toast.show({
              text: "请检查房间号",
              type: 'text',
              //width: '11em',
              time: '1000',
              onShow () {},
              onHide () {}
            }); 
            return; 
        }
        if(!this.products || this.products.length <= 0){
          this.$vux.toast.show({
              text: "请先添加商品",
              type: 'text',
              //width: '11em',
              time: '1000',
              onShow () {},
              onHide () {}
            }); 
            return; 
        }
          this.showConfirm = true;
      },
      onCancel(){
          this.showConfirm = false;
      },
      onConfirm(){
        this.showConfirm = false;
        this.addAddress();
      },
      addAddress(){
       
        var data = {
          action: "addAddress",
          accountId:this.userId,
          consignee:this.name,
          phone:this.phone,
          builderId:this.hotel.hotel.id,
          floorNo:1,
          detail:this.roomNo
        };
        console.log("addAddress")
        console.log(data)
        MyGetWithToast("Hotel", this, function (result, that) {
          console.log("添加地址返回")
          console.log(result);
          that.addressId = result.data.id;
          that.areaId = result.data.areaId;
          that.cityId = result.data.cityId;
          that.orderSubmit();
        }, data);
      },
      orderSubmit() {
        console.log("orderSubmit");
        //var localAddress = LocalStorageUtil.getItem("Address");
        var shopData = getOrderList();
        //shopData = shopData.replace(/\\"/g, "'");
        console.log("shopData")
        console.log(shopData)
        //var user = LocalStorageUtil.getItem("User");
        var orderInfo = {
          "address": this.addressId,
          "mark": this.mark,
          "mobile": this.phone,
          "time": this.value5[0],
          "userId": this.userId,
          "shopData": shopData
        }
       console.log(orderInfo);
        var newOrderInfo = JSON.stringify(orderInfo);
        //var reg=new RegExp('\\\"',"g");
        //var regs=new RegExp('\\',"g");
        newOrderInfo = newOrderInfo.replace(/\\"/g, "'");
        //newOrderInfo = newOrderInfo.replace(regs, " ");
        //newOrderInfo = newOrderInfo.replace('address','wocaonima');
        var data = {
          action: "packages",
          platform: "WechatApp",
          userId: this.userId,
          cityId: this.cityId,
          areaId: this.areaId,
          orderInfo: newOrderInfo
        };
        console.log("提交订单")
        console.log(data)
        MyGetWithToast("OrderSubmit", this, function (result, that) {
          console.log("提交订单返回");
          clearCartStorage();
          console.log(result);
          if (result.success) {
            var data = result.data;
            //this.$router.push({name: 'pay', query: {classId: "1"}});
            that.$router.replace({
              name: 'pay', query: {
                freePrice: data.freePrice,
                orderId: data.orderId,
                orderNo: data.orderNo,
                orderTime: data.orderTime,
                totalPrice: data.totalPrice
              }
            });
            //Global.closeLoading();
          }else{
            //Global.showToast(result.msg,that);
          }
        }, data);
      },
    },
    mounted(){
        this.getActiveDay();
        this.init();
        this.address = this.hotel.hotel.builderName+"-"+this.hotel.hotel.address;
    },
    filters:{
      currency:function (value) {
//        if (!value) return ''
        value = fmoney(value,2);
        return ("¥"+value)
      }
    }
  }
</script>
<style lang="less">
  @import "cart.less";
</style>
